<!-- 
  @name: 充值成功
  @date: 2020.3.10
 -->
<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="topview">
			<view class="total">
				<view class="icon"></view>
				<text class="note">充值成功</text>
				<view class="mount">
					<text class="icon-2">￥</text>
					<text class="num">{{info.payMoney}}</text>
				</view>
			</view>
			<view class="info">
				<view class="line-1">
					<text>充值客户：</text>
					<text class="right">{{info.payTime}}</text>
				</view>
				<view class="line-2">
					<text class="left">姓名：</text>
					<text>{{info.userName}}</text>
				</view>
				<view class="line-2">
					<text class="left">余额：</text>
					<text>{{info.userBalance}}元</text>
				</view>
			</view>
		</view>
		
		<!-- 按钮 -->
		<view class="btn_pub" @tap="close">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},  //信息
			}
		},
		onLoad(e) {
			this.info = JSON.parse(this.$store.state.tmpData);
			this.$store.commit('setTmpData', '');
			uni.$emit('client_changeBalance', {
				userBalance: this.info.userBalance
			});
		},
		methods: {
			//关闭页面
			close() {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部区域 */
	.topview {
		width: 750rpx;
		height: 730rpx;
		padding: 0 45rpx;
		background-color: $color-white;
		.total {
			width: 100%;
			height: 442rpx;
			border-bottom: 1rpx dashed $color-list;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.icon {
				width: 118rpx;
				height: 120rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15nZYmAMXLBAAAOcC_bHjA933.png');
			}
			.note {
				color: $color-primary;
				font-weight: bold;
				margin-top: 29rpx;
			}
			.mount {
				margin-top: 50rpx;
				.icon-2 {
					font-size: 48rpx;
					font-weight: bold;
				}
				.num {
					margin-left: 10rpx;
					font-size: 86rpx;
					font-family: $font-family-num;
				}
			}
		}
		.info {
			width: 100%;
			.line-1 {
				width: 100%;
				padding: 0 16rpx;
				margin-top: 54rpx;
				color: $color-grey;
				display: flex;
				flex-direction: row;
				align-items: center;
				.right {
					flex: 1;
					text-align: end;
					font-size: 22rpx;
				}
			}
			.line-2 {
				width: 100%;
				margin-top: 30rpx;
				margin-left: 118rpx;
				.left {
					color: $color-grey;
				}
			}
		}
	}
	
	/* 按钮 */
	.btn_pub {
		margin-top: 40rpx;
	}
	
</style>
